<template>
    <div class="patent">
        <el-row :gutter="24">
            <el-col :span="16">

            </el-col>
        </el-row>
        <el-row :gutter="24">
            <el-col :span="24">
                <el-table :data="tableData" border style="width: 100%" align="center">
                    <el-table-column type="index" width="50" center>
                    </el-table-column>
                    <el-table-column prop="gk_gg_h" label="公开公告号" width="180">
                    </el-table-column>
                    <el-table-column prop="zlsqh" label="专利申请号" width="180">
                    </el-table-column>
                    <el-table-column prop="zlfyzl" label="专利费用种类" width="180">
                    </el-table-column>
                    <el-table-column prop="jfjzr" align="left" label="缴费截止日" width="180">
                    </el-table-column>
                    <el-table-column prop="zlnd" label="专利年度" width="100">
                    </el-table-column>
                    <el-table-column prop="fyzt" label="费用状态" width="120">
                    </el-table-column>
                    <el-table-column prop="yjje" label="应缴金额" width="120">
                    </el-table-column>
                    <el-table-column prop="znje" label="滞纳金额" width="120">
                    </el-table-column>
                    <el-table-column prop="nfzje" label="年费总金额" width="180">
                    </el-table-column>
                    <el-table-column fixed="right" label="操作" width="100">
                        <template slot-scope="scope">
                            <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                        </template>
                    </el-table-column>

                </el-table>

            </el-col>
        </el-row>
        <div style="text-align: right; margin-top: 20px;">

            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
                :page-sizes="[10, 20, 30, 40, 50, 100]" :page-size="pageSize" layout="total, prev, pager, next, sizes"
                :total="total">
            </el-pagination>
        </div>


        <!-- 查看 -->
        <el-dialog :span="24" :visible.sync="rowVisible" width="70%">
            <el-form :model="form" ref="form">
                <el-row :gutter="24">
                    <el-col :span="8">

                        <el-form-item label="公开/公告号" :label-width="formLabelWidth">

                            <el-input v-model="form.gk_gg_h" :disabled="true"></el-input>
                        </el-form-item>

                    </el-col>
                    <el-col :span="8">

                        <el-form-item label="专利申请号" :label-width="formLabelWidth">
                            <el-input v-model="form.zlsqh" autocomplete="off" :disabled="true"></el-input>
                        </el-form-item>

                    </el-col>
                    <el-col :span="8">

                        <el-form-item label="专利费用种类" :label-width="formLabelWidth">
                            <el-input v-model="form.zlfyzl" autocomplete="off" :disabled="true"></el-input>
                        </el-form-item>


                    </el-col>

                </el-row>
                <el-row :gutter="24">
                    <el-col :span="8">

                        <el-form-item label="缴费截止日" :label-width="formLabelWidth">

                            <el-input v-model="form.jfjzr" :disabled="true"></el-input>
                        </el-form-item>

                    </el-col>
                    <el-col :span="8">

                        <el-form-item label="专利年度" :label-width="formLabelWidth">
                            <el-input v-model="form.zlnd" autocomplete="off" :disabled="true"></el-input>
                        </el-form-item>

                    </el-col>
                    <el-col :span="8">

                        <el-form-item label="费用状态" :label-width="formLabelWidth">
                            <el-input v-model="form.fyzt" autocomplete="off" :disabled="true"></el-input>
                        </el-form-item>


                    </el-col>

                </el-row>
                <el-row :gutter="24">
                    <el-col :span="12">

                        <el-form-item label="应缴金额" :label-width="formLabelWidth">

                            <el-input v-model="form.yjje" :disabled="true"></el-input>
                        </el-form-item>

                    </el-col>
                    <el-col :span="12">

                        <el-form-item label="滞纳金额" :label-width="formLabelWidth">
                            <el-input v-model="form.znje" autocomplete="off" :disabled="true"></el-input>
                        </el-form-item>

                    </el-col>


                </el-row>
                <el-row :gutter="24">
                    <el-col :span="12">
                        <el-descriptions class="margin-top" title="年费总金额" direction="vertical">
                            <el-descriptions-item>{{ form.nfzje }}元</el-descriptions-item>
                        </el-descriptions>
                    </el-col>
                </el-row>

            </el-form>
        </el-dialog>

    </div>
</template>
<script>
import Cookies from "js-cookie";
export default {
    data() {
        return {
            userInfo:{},
            restaurants: [],
            state: '',
            timeout: null,
            formInline: {

            },
            tableData: [],
            currentPage: 1,
            pageSize: 20,
            total: 0,
            bt_zw_: '',
            dyfmr: '',
            rowVisible: false,
            formLabelWidth: '100px',
            form: {
                gk_gg_h: '',

                zhaiyao: '',

                bt_zw_: ''

            },
        }
    },
    created() {

    },
    mounted() {
        this.getCookie();
        this.getFilterRows();
    },
    methods: {
        getCookie() {
            this.userInfo = JSON.parse(Cookies.get("userInfo"));
        },
        onSubmit() {
            console.log('submit!');
            this.getFilterRows()
        },

        querySearchAsync(queryString, cb) {
            var restaurants = this.restaurants;
            var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;

            clearTimeout(this.timeout);
            this.timeout = setTimeout(() => {
                cb(results);
            }, 3000 * Math.random());
        },
        createStateFilter(queryString) {
            return (state) => {
                return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
            };
        },
        handleSelect(item) {
            console.log(item);
        },
        resetForm(formName) {
            this.bt_zw_ = ''
            this.dyfmr = ''
            this.shenqingren = ''
            this.getFilterRows()
        },



        //
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.pageSize = val
            this.getFilterRows()
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.currentPage = val
            this.getFilterRows()
        },

        //
        getFilterRows() {
            var a = 1
            var param = {
                "appKey": "c4d42996f1b29c98",
                "sign": "MGJjY2VmMGQwYjIzYzM3OTBjYmYyODk0ODJjOGQ0ZmY1Y2MzZTRlZDNkMmIyYzM1NTRjZDMxYTIwMzg3ODIzMw==",
                "worksheetId": "64e470c197432864d7924ad3",
                "viewId": "64e55e72592efda8ca00af8d",
                "pageSize": this.pageSize,
                "pageIndex": this.currentPage,
                "sortId": "",
                "isAsc": "true",
                "filters": [
                    {
                        "controlId": "ssdw",
                        "dataType": 2,
                        "spliceType": 1,
                        "filterType": 1,
                        "value": this.userInfo.danwei
                    },

                ]
            }
            this.$apiFun.getFilterRows(param).then((res) => {
                //根据后端返回数据进行data的逻辑处理
                console.log(res)
                this.total = res.data.total
                this.tableData = res.data.rows
            })
        },
        //查看
        handleClick(row) {
            this.rowItem = row
            var param = {
                "appKey": "c4d42996f1b29c98",
                "sign": "MGJjY2VmMGQwYjIzYzM3OTBjYmYyODk0ODJjOGQ0ZmY1Y2MzZTRlZDNkMmIyYzM1NTRjZDMxYTIwMzg3ODIzMw==",
                "worksheetId": "64e470c197432864d7924ad3",
                "rowId": row.rowid
            }
            this.$apiFun.getRowByIdPost(param).then((res) => {
                //根据后端返回数据进行data的逻辑处理
                console.log(res)
                this.rowVisible = true
                this.form = res.data
            })
        },
    }
}
</script>

<style lang="scss" scoped>
.patent {
    background-color: #fff;
    padding: 15px;
}
</style>